<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>开灯</title>
		<style>
			#mybody{
				/* 文本内容居中*/
				text-align: center;
				background-color: #000000;
			}
		</style>
	</head>
	<body id="mybody">
		<!-- 
			没亮：https://www.runoob.com/images/pic_bulboff.gif
			亮  ：https://www.runoob.com/images/pic_bulbon.gif 
		-->
		<img onmouseover="over()" onmouseout="out()" id="deng"
		src="https://www.runoob.com/images/pic_bulboff.gif">
		
		<script type="text/javascript">
			/* 找到灯 */
			var deng = document.getElementById("deng");
			/* 找到body */
			var mybody = document.getElementById("mybody");
			
			function over(){//移进去
				/* .src 修改src属性 */
				deng.src = "https://www.runoob.com/images/pic_bulbon.gif";
				/* 修改style的背景颜色 */
				mybody.style.backgroundColor = "#FFFFFF";
			}
			function out(){
				deng.src = "https://www.runoob.com/images/pic_bulboff.gif";
				mybody.style.backgroundColor = "#000000";
			}
		</script>
	</body>
</html>
